    <template>
<!--    歌单详情页面-->
    <div class="palylist">
<!--        歌单详情区域-->
        <div class="details">
            <div class="detailimg">
                <img :src="playlist.coverImgUrl" style="width: 100%;height: 100%">
            </div>
            <div class="detailItem">
                <div><h3>{{playlist.name}}</h3></div>
                <div style="font-weight: bolder">
                    <img style="width: 30px;height: 25px; vertical-align: middle" :src="playlist.creator.avatarUrl">
                    <span style="vertical-align: middle"><span style="margin-right: 18px"></span>{{playlist.creator.nickname}}</span>
                </div>
                <div style="display: flex;font-weight:900;font-size: small">
                    <div style="margin-left: 0px;">标签:</div>
                    <div  style="margin-left: 0px;">
                    <ul>
                        <li v-for="(item,index) in playlist.tags" :key="index" style="float: left;list-style: none;">
                            {{item}}&nbsp;
                        </li>

                    </ul>
                    </div>
                </div>
                <div style="font-size: 13px;overflow: hidden;">简介：{{playlist.description}}</div>
            </div>
        </div>
<!--        歌曲评论标签区域-->
        <div class="tabs" >
            <el-tabs v-model="activeName" @tab-click="handleClick">
<!--                歌曲区域-->
                <el-tab-pane label="歌曲列表" name="first">
                    <div class="music">
                        <el-table
                                @row-click="playmusic"
                                :data="musiclist"
                                style="width: 100%">

                            <el-table-column


                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="音乐标题"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="ar[0].name"
                                    label="歌手">
                            </el-table-column>
                            <el-table-column
                                    prop="al.name"
                                    label="专辑">
                            </el-table-column>
                            <el-table-column
                                    prop="dt"
                                    label="时长">
                            </el-table-column>
                        </el-table>
                    </div>

                </el-tab-pane>

<!--                评论区域-->
                <el-tab-pane label="评论列表" name="second">
<!--                    热门评论区域-->
                    <div class="comment">
                        <h3 style="margin-bottom: 10px">热门评论（{{hotComments.length}}）</h3>
                        <div class="commentItem" v-for="(item,index) in hotComments" :key="index">
                            <div class="imgDiv">
                                <img :src="item.user.avatarUrl" style="width:85%; height:85%">
                            </div>
                            <div class="item">
                                <div style="font-size: small"><span style="color: #3a8ee6">{{item.user.nickname}}:</span><span>{{item.content}}</span></div>
                                <div style="color: #d1dbe5;font-size: small">2020年2月12日 15：44</div>
                            </div>
                        </div>
                    </div>

<!--                    最近评论区域-->
                    <div class="comment">
                        <h3 style="margin-bottom: 10px">最新评论（{{commentTotal}}）</h3>
                        <div class="commentItem" v-for="(item,index) in comments" :key="index">
                            <div class="imgDiv">
                                <img :src="item.user.avatarUrl" style="width: 85%;height: 85%">
                            </div>
                            <div class="item">
                                <div style="font-size: small"><span style="color: #3a8ee6">{{item.user.nickname}}:</span><span>{{item.content}}</span></div>
                                <div style="color: #d1dbe5;font-size: small">2017年9月28日 8：43</div>
                            </div>
                        </div>
                    </div>
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="this.commentTotal"
                            :page-size="15"
                            @current-change="handCurrentChange">
                    </el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "playlist",
        data(){
            return{
                playlist:{},
                activeName: 'second',
                hotComments:[0,],
                comments:[0],
                commentTotal:'',
                page:1,
                musiclist:[],
                count:0

            }
        },
        created() {
            this.getdetail(this.$route.params.id);
            this.gethotcomment(this.$route.params.id);
            this.getcomments(this.page);
        },
        methods:{
            // 获取歌单详情
                getdetail(id){
                    axios({
                        method:'get',
                        url:'https://autumnfish.cn/playlist/detail',
                        params:{
                            id
                        }
                    }).then(res=>{

                        this.playlist=res.data.playlist;
                        this.musiclist=res.data.playlist.tracks;
                        this.count=this.musiclist.length;
                        for(let i=0;i<this.musiclist.length;i++){
                            let min=parseInt(this.musiclist[i].dt/1000/60)
                            let sec=parseInt((this.musiclist[i].dt/1000)%60)
                            if(min<10){
                                min='0'+min
                            }
                            if(sec<10){
                                sec='0'+sec
                            }
                            this.musiclist[i].dt=min+":"+sec
                        }
                        console.log(this.musiclist)

                    },err=>{
                        console.log(err)
                    })

                },
            // 获取热门评论
            gethotcomment(id){
                    axios({
                        method:'get',
                        url:'https://autumnfish.cn/comment/hot',
                        params:{
                            id,
                            type:2
                        }
                    }).then(res=>{
                        // console.log(res)
                        this.hotComments=res.data.hotComments;


                    },err=>{
                        console.log(err);
                    })
            },
            // 获取最新评论
            getcomments(offset){
              axios({
                  url:'https://autumnfish.cn/comment/playlist',
                  method:'get',
                  params:{
                      id:this.$route.params.id,
                      limit:15,
                      offset:(offset-1)*10
                  }
              }).then(res=>{
                  console.log(res);
                  this.comments=res.data.comments;
                  this.commentTotal=res.data.total;
              },err=>{
                  console.log(err)
              })
            },
            // 获取当前需要播放音乐的详情
            playmusic(row, column, event){
                axios({
                    method:'get',
                    url:' https://autumnfish.cn/song/url',
                    params:{
                        id:row.id
                    }
                }).then(res=>{

                    this.$store.commit('turnmusicurl',res.data.data[0])

                },err=>{
                    console.log(err)
                })
                this.$store.commit('addAllMusic',row)
                console.log(this.$store.state.collectionMusicList)
            },
            handCurrentChange(val){

              this.getcomments(val)
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }

    }
</script>

<style scoped>
    .details{
        display: flex;
        width: 90%;
        height: 200px;

    }
    .detailimg{
            width: 25%;
        height: 100%;
        margin-right: 20px;
    }
    .detailItem{
        display: flex;
        flex-direction: column;
        width: 80%;
        height: 100%;

    }
    .detailItem div{
        margin: 10px;
    }
    .tabs{
        width: 90%;
    }
    .comment{
        margin-bottom: 40px;
        width: 100%;
    }
    .commentItem{
        display: flex;
        width: 100%;
        height: 60px;

    }
    .imgDiv{
        width:7%;
        height: 100%;

        margin-right: 5px;
    }
    .item{
        display: flex;
        flex-direction: column;
       justify-content: space-around;
    }
    .music{

        margin-bottom: 40px;
        width: 100%;

    }
</style>